<template>
  <main-nav-bar>
    <template v-slot:center-name>
      <div>{{name}}</div>
    </template>
    <template v-slot:home-nav-back>
      <div><i class="iconfont icon-jiantou2"></i></div>
    </template>
  </main-nav-bar>
  <div class="content">
    <div>
      <h1>{{title}}</h1>
    </div>
    <div v-html="bookintro"></div>
  </div>
  <div class="bottom">
     <div v-if="is_clock==0">
          <div class="bot" v-if="flage">
            <div><span>我要打卡</span><span>(</span>{{time}}s<span>)</span></div> 
        </div> 
        <div class="bot over" v-else @click="goClock">
            <div><span>我要打卡</span></div> 
        </div> 
     </div>
     <div v-if="is_clock==1">
        <div class="bot" @click="goClock">
            <div><span>已打卡</span></div> 
        </div> 
     </div>
  </div>
</template>





<script>
import { Toast } from 'vant';
import {request} from "../../network/request"
import MainNavBar from "../../components/content/mainnavbar/MainNavBar.vue";
export default {
     data() {
        return {
            time:15,
            flage:true,
            id:"",
            name:"",
            bookintro:"",
            title:"",
            book_id:"",
            is_clock:0
        };
  },
  methods: {
    jian() {
    var timer = null;
      timer = setInterval(()=>{
            this.time--;
            if(this.time == 0){
               this.flage = !this.flage
               clearInterval(timer)
           }
           },1000)
        },
      async goClock(){
         const res = await request({
            url:"/v1.index/clock",
            data:{
              clock:this.id,
              book_id:this.book_id,
              user_id:sessionStorage.getItem("user_id"),
            }
          });
          if(res.code == 200){
            Toast("打卡成功")
            this.flage=true
            this.is_clock = 1;
          }else{
            Toast("重复打卡")
          }
        },
      async getbooksDetail(){
          const res = await request({
            url:"/v1.index/getListIntro",
            data:{
              id:this.id,
              user_id:sessionStorage.getItem("user_id")
            }
          });
          if(res.code==200){
            this.name = res.data.rows.name;
          this.bookintro = res.data.rows.intro;
          this.title = res.data.rows.title;
          this.book_id = res.data.rows.book_id;
          this.is_clock = res.data.rows.is_clock
          }else{
            Toast(res.msg)
          }
        }  
    },
  
    mounted(){
      this.id=this.$route.query.id
      this.getbooksDetail()
      this.jian()
    },
  components: {
    MainNavBar,
  },
};
</script>

<style  scoped>
.content {
  width: 86.133vw;
  margin: 0 auto;
  padding-top: 13.333vw;
  padding-bottom: 21.333vw;
  background-color: #fff;
}
h1 {
  font-size: 4.8vw;
  text-align: center;
}
.content p {
  text-indent: 8vw;
  font-size: 3.733vw;
  line-height: 5.333vw;
}
.bot{
    width: 86.133vw;
    height: 13.333vw;
    margin: 0 auto;
    font-size: 5.067vw;
    line-height: 13.333vw;
    text-align: center;
    color: #fff;
    background-color: #bababa;
    border-radius: 2.667vw; 
    /* display: flex; */
}
.bottom{
    width: 100vw;
    height: 17.333vw;
    position: fixed;
    bottom: -0.533vw;
    background-color: #fff;
}
.van-count-down{
    line-height: 14.133vw;
    display: inline-block;
    color: #fff;
}
.over{
    background-color: #6e0802;
}
</style>